<template>
  <div>
    <!--	header -->
    <mt-header title="审批预定" fixed>
      <router-link to="/hello" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <yd-layout>
      <yd-accordion style="margin-top: 50px;">
        <div style="text-align: center;font-size: 16px;" v-show="showNone">暂无数据</div>
        <yd-accordion-item v-for="(item,index) in data" :key="item.toString()" :open="((index === 0) && (!bookId)) || (bookId == item.id) ? true : false">
          <div slot="title">
            <font>{{item.reason.length>5?item.reason.substring(0,4):item.reason}}</font>
            <font style="color: red;float: right;margin-right: 10px;">{{item.bookDate}}</font>
          </div>

          <div style="padding: .24rem;">
            <yd-cell-item>
              <span slot="left">部门:</span>
              <span slot="right">【{{item.book_userDept}}】</span>
            </yd-cell-item>
            <yd-cell-item>
              <span slot="left">预订人:</span>
              <span slot="right">{{item.book_userName}}</span>
            </yd-cell-item>
            <yd-cell-item>
              <span slot="left">目的:</span>
              <span slot="right">{{item.reason}}</span>
            </yd-cell-item>
            <yd-cell-item>
              <span slot="left">时间:</span>
              <span slot="right">{{item.book_time}}</span>
            </yd-cell-item>
            <yd-cell-item>
              <span slot="left">是否需要果盘茶歇：:</span>
              <span slot="right">{{item.is_ext == true ? '是' : '否'}}</span>
            </yd-cell-item>
            <yd-cell-item v-if = 'item.is_ext'>
              <span slot="left">人数:</span>
              <span slot="right">{{item.ext_num}}</span>
            </yd-cell-item>
            <yd-cell-item>
              <span slot="left"><yd-button type="primary" @click.native="pass(item.id,item.book_userName)">通过</yd-button></span>
              <span slot="right"><yd-button type="danger" @click.native="refuse(item.id)">拒绝</yd-button></span>
            </yd-cell-item>
          </div>
        </yd-accordion-item>
      </yd-accordion>
    </yd-layout>
  </div>
</template>

<script>
  import bookApi from '@/api/bookApi.js'
  import { MessageBox } from 'mint-ui'

  export default {
    name: 'hello',
    data() {
      return {
        data: [],
        bookId: -1
      }
    },
    computed: {
      showNone() {
        return this.data.length <= 0 ? true : false
      }
    },
    methods: {
      getErrMsg(msg) {
        if (msg.indexOf(': ') !== -1)
          return msg.split(': ')[1]
        else
          return msg
      },
      pass(id, booker) {
        bookApi.approve({
            id: id,
            status: 1,
            booker: booker
          })
          .then(data => {
            this.$dialog.toast({
              mes: '审批通过!',
              timeout: 1000,
              icon: 'success',
              callback: () => {}
            })
            this.loadData()
          })
          .catch(err => {
            this.$dialog.toast({
              mes: this.getErrMsg(err),
              timeout: 2000,
              icon: 'error',
              callback: () => {}
            })
          })
      },
      refuse(id) {
        MessageBox.prompt('请输入拒绝原因')
          .then(({
            value,
            action
          }) => {
            bookApi.approve({
                id: id,
                status: -1,
                refuse: value
              })
              .then(data => {
                this.$dialog.toast({
                  mes: '操作成功',
                  timeout: 1000,
                  icon: 'success',
                  callback: () => {}
                })
                this.loadData()
              })
          })

      },
      loadData() {
        bookApi.findPendingApprovalBookList()
          .then(data => {
            this.data = data
            console.log(this.data)
          })
          .catch(error => {})
      }
    },
    mounted() {
      this.loadData()
      this.bookId = this.$route.query.bookId
      console.log('bookId', this.bookId)
    }
  }
</script>

<style>

</style>